<template>
  <div class="rich-text"  @click="click">
      <textarea :id="id" class="rich-arae"></textarea>
  </div>
</template>

<script>
import { computed, nextTick, onActivated, onUnmounted, onMounted, reactive, onDeactivated, ref } from 'vue'
export default {
    name: 'RichText',
    components:{
        
    },
    setup(){
      onMounted(()=>{
          console.log(id.value);
           tinymce.init({
                selector: `#${id.value}`,
                height: 360,
                language_url : '/tinymce/zh_CN.js',
                language: 'zh_CN',
                plugins: [
                    'advlist autolink link image lists charmap print preview hr anchor pagebreak',
                    'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                    'table emoticons template paste help fullpage'
                ],
                toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
                'bullist numlist outdent indent | link image | print preview media fullpage | ' +
                'forecolor backcolor emoticons | help',
                menu: {
                    favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}
                },
                menubar: 'favs file edit view insert format tools table help',
                content_css: 'css/content.css'
                });
      })

      onUnmounted(()=>{
          destroyTinymce()
      })

      onDeactivated(()=>{
          destroyTinymce()
      })

      const id = ref(
          'tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      )
        const click = ()=>{
            console.log(id.value);
            destroyTinymce()
        }

      const destroyTinymce= () => {
            const tinymce = window.tinymce.get(id.value)
            if (tinymce) {
                tinymce.destroy()
            }
        }

      return {id,click}
    }
}
</script>

<style lang="scss" scoped>
.rich-arae{
    visibility: hidden;
}
</style>